<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--列表-->
		<el-table
				:data="list.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))"
				border
				row-key="_id"
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
				style="width: 100%;">
			<el-table-column prop="userName" label="姓名" min-width="40" sortable></el-table-column>
      <el-table-column prop="phoneNumber" label="手机号" min-width="40" sortable></el-table-column>
			<el-table-column prop="email" label="邮箱" min-width="40" sortable></el-table-column>
			<el-table-column prop="message" label="留言" min-width="120" sortable></el-table-column>
			<el-table-column label="操作" width="250">
				<template slot="header" slot-scope="scope">
					<el-input
							v-model="search"
							size="mini"
							placeholder="输入姓名搜索"/>
				</template>
				<template slot-scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<!--<el-col :span="24" class="toolbar">-->
			<!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
			<!--<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">-->
			<!--</el-pagination>-->
		<!--</el-col>-->

		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" ref="addForm">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="editForm.userName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="name">
					<el-input v-model="editForm.phoneNumber" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="name">
					<el-input v-model="editForm.email" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="留言" prop="name">
					<el-input type="textarea" :row="2" v-model="editForm.message" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" ref="addForm">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="addForm.userName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="name">
					<el-input v-model="addForm.phoneNumber" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="name">
					<el-input v-model="addForm.email" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="留言" prop="name">
					<el-input type="textarea" :row="2" v-model="addForm.message" auto-complete="off"></el-input>
				</el-form-item>
      </el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	let moment = require('moment')
	import {getMessageList,delMessage,addMessage,editMessage} from "@/api/message/api";
	export default {
		data() {
			return {
				filters: {
					name: ''
				},
				list: [],
				listLoading: false,
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				//编辑界面数据
				editForm: {
					userName: '',   //新闻标题
					phoneNumber: '',  //新闻正文
					email: '',   //新闻标题
					message: '',  //新闻正文
					time: moment().format('YYYY-MM-DD HH:mm:ss')
				},
				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				//新增界面数据
				addForm: {
					userName: '',   //新闻标题
					phoneNumber: '',  //新闻正文
					email: '',   //新闻标题
					message: '',  //新闻正文
          time: moment().format('YYYY-MM-DD HH:mm:ss')
				},
				search: ''
			}
		},
		methods: {
			searchChange(){
				this.accountList = this.accountList.filter(data => !this.search || data.account.toLowerCase().includes(this.search.toLowerCase()))
			},
			//获取新闻列表
			getMessageList() {
				this.listLoading = true;
				getMessageList().then((res) => {
					this.list = res.data;
					this.listLoading = false;
				});
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { id: row._id };
					delMessage(para).then((res) => {
						this.listLoading = false;
						this.getMessageList();
					});
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit (index, row) {
				this.editFormVisible = true;
				this.editForm.userName = row.userName;
				this.editForm.phoneNumber = row.phoneNumber;
				this.editForm.email = row.email;
				this.editForm.message = row.message;
				this.editForm.id = row._id;
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
			},
			//编辑
			editSubmit: function () {
				this.$confirm('确认提交吗？', '提示', {}).then(() => {
					let para = Object.assign({}, this.editForm);
					editMessage(para).then((res) => {
						if(res.code == 200) {
							this.editLoading = false;
							this.editFormVisible = false;
							this.getMessageList();
						}
					});
				});
			},
			//新增
			addSubmit: function () {
					this.$confirm('确认提交吗？', '提示', {}).then(() => {
						this.addLoading = true;
						let para = Object.assign({}, this.addForm);
						addMessage(para).then((res) => {
							if(res.code == 200){
								Object.keys(this.addForm).forEach(key => this.addForm[key] = '');
								this.addLoading = false;
								this.addFormVisible = false;
								this.getMessageList()
							}
						});
				});
			},

		},
		mounted() {
			this.getMessageList();
		}
	}

</script>

<style lang="less">
   .viewNews img{
      width: 100%;
		 height: auto;
    }
</style>
